<!DOCTYPE html>
<html>
<head>
    <title>Methods</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.dataviz.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.dataviz.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
</head>
<body>
    <a class="offline-button" href="../index.html">Back</a>
    
        <div id="example" class="k-content">
            <div class="configuration k-widget k-header" style="width:170px;">
                <span class="configHead">API Functions</span>
                <ul class="options">
                    <li>
                        <input id="typeColumn" name="seriesType"
                                type="radio" value="column" checked="checked" autocomplete="off" />
                        <label for="typeColumn">Columns</label>
                    </li>
                    <li>
                        <input id="typeBar" name="seriesType"
                                type="radio" value="bar" autocomplete="off" />
                        <label for="typeBar">Bars</label>
                    </li>
                    <li>
                        <input id="typeLine" name="seriesType"
                                type="radio" value="line" autocomplete="off" />
                        <label for="typeLine">Lines</label>
                    </li>
                    <li>
                        <input id="stack" type="checkbox" autocomplete="off" checked="checked" />
                        <label for="stack">Stacked</label>
                    </li>
                </ul>
                <p>
                    <strong>refresh()</strong> will be called on each configuration change
                </p>
            </div>
            <div class="chart-wrapper">
                <div id="chart"></div>
            </div>
            <script>
                function createChart() {
                    $("#chart").kendoChart({
                        theme: $(document).data("kendoSkin") || "default",
                        title: {
                            text: "Internet Users"
                        },
                        legend: {
                            position: "bottom"
                        },
                        seriesDefaults: {
                            type: "column",
                            stack: true
                        },
                        series: [{
                            name: "United States",
                            data: [67.96, 68.93, 75, 74, 78],

                            // Line chart marker type
                            markers: { type: "square" }
                        }, {
                            name: "World",
                            data: [15.7, 16.7, 20, 23.5, 26.6]
                        }],
                        valueAxis: {
                            labels: {
                                format: "{0}%"
                            }
                        },
                        categoryAxis: {
                            categories: [2005, 2006, 2007, 2008, 2009]
                        },
                        tooltip: {
                            visible: true,
                            format: "{0}%"
                        }
                    });
                }

                $(document).ready(function() {
                    setTimeout(function() {
                        // Initialize the chart with a delay to make sure
                        // the initial animation is visible
                        createChart();

                        $("#example").bind("kendo:skinChange", function(e) {
                            createChart();
                        });
                    }, 400);

                    $(".configuration").bind("change", refresh);
                });

                function refresh() {
                    var chart = $("#chart").data("kendoChart"),
                        series = chart.options.series,
                        type = $("input[name=seriesType]:checked").val(),
                        stack = $("#stack").prop("checked");

                    for (var i = 0, length = series.length; i < length; i++) {
                        series[i].stack = stack;
                        series[i].type = type;
                    };

                    chart.refresh();
                }
            </script>
            <style scoped>
                .chart-wrapper {
                	margin: 0 0 0 20px;
                	width: 466px;
                	height: 434px;
                	background: url("../../content/shared/styles/chart-wrapper-small.png") transparent no-repeat 0 0;
                }
                
                .chart-wrapper .k-chart {
                    height: 280px;
                    padding: 37px;
                    width: 390px;
                }
            </style>
        </div>

</body>
</html>
